<template>
    <div>
        <h1>全部成绩查询</h1>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
                <router-link :to="item.url" v-if="item.url">{{
                        item.name
                }}</router-link>
                <a v-else>{{ item.name }}</a>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <el-table :data="tableData" style="width: 120%" @row-click="goDetail">
            <el-table-column prop="stu_id" label="学号" width="120">
            </el-table-column>
            <el-table-column prop="stu_name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="stu_sex" label="性别" width="120">
            </el-table-column>
            <el-table-column prop="stu_jg" label="籍贯" width="120">
            </el-table-column>
            <el-table-column prop="" label="出生日期" width="180">
                <template slot-scope="scope">
                    <p>{{ $moment(scope.row.stu_date).format("YYYY年MM月DD日") }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="stu_hobby" label="爱好" width="120">
            </el-table-column>
            <el-table-column prop="stu_gbf" label="男或女朋友" width="120">
            </el-table-column>
            <el-table-column prop="" label="头像" width="120">
                <template slot-scope="scope">
                    <el-image style="width: 120px; height: 120px" :src="scope.row.stu_head_img"
                        :preview-src-list="[scope.row.stu_head_img]">
                    </el-image>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :total="totallength" :page-size="2" background
            @current-change="currentChange">
        </el-pagination>
        <button @click="gofenxi">
            去分析
        </button>
    </div>


</template>

<script>
import request from "../../api/request";
import { Table, TableColumn, Image, Pagination } from "element-ui"

export default {
    data() {
        return {
            alldata: [],
            tableData: [],
            totallength: 0,
            index: 1
        }
    },
    components: {
        "el-table": Table,
        "el-table-column": TableColumn,
        "el-image": Image,
        "el-pagination": Pagination
    },
    async mounted() {
        const stu_all_info = await request("get", "/search_info", 0, 0)
        console.log(stu_all_info.data)
        this.alldata = stu_all_info.data
        this.totallength = stu_all_info.data.length
        this.tableData = this.alldata.slice(this.index * 2 - 2, this.index * 2)
    },

    methods: {
        goDetail(row, column, event) {
            console.log(row)
            console.log(column)
            if (event.target.tagName != "IMG") {
                this.$router.push({
                    path: "/StudentDetail", query: {
                        allinfo: JSON.stringify(row)
                    }
                })
            }
        },
        currentChange(index) {
            this.tableData = this.alldata.slice(index * 2 - 2, index * 2)
        }
        ,
        gofenxi() {
            this.$router.push("/ScoreFenXi")
        }
    }
}

</script>

<style lang="scss" scoped>

</style>